<template>
	<view :style="colorStyle">
		<view class="flex-col" :style="{ minHeight: mainHeight+'px'}">
			<view class="w-full fixed-lt z-20" :style="{'padding-top': sysHeight + 'px'}">
				<view class="h-80 px-20 flex-between-center">
					<text class="iconfont icon-ic_leftarrow fs-40 text--w111-fff" @tap="pageBack"></text>
				</view>
			</view>
			<view class="header-top relative" :style="[headerBg]">
				<view class="rule-btn w-124 flex-center fs-24 text--w111-fff" @tap="goRecord">申请记录</view>
			</view>
			<view class="bg-v-gradient pl-20 pr-20 pb-24 flex-1 relative z-4 mt-f14">
				<view class="bg--w111-fff rd-24rpx content-box">
					<view class="fs-30 fw-500 lh-42rpx">请填写以下信息</view>
					<view class="cell flex-between-center mt-64">
						<view class="fs-28 lh-40rpx">门店名称</view>
						<input type="text" v-model="form.system_name" placeholder="请输入门店名称" placeholder-class="text--w111-ccc" class="fs-28 text-right" />
					</view>
					<view class="cell flex-between-center mt-64">
						<view class="fs-28 lh-40rpx">联系人</view>
						<input type="text" v-model="form.name" placeholder="请输入姓名" placeholder-class="text--w111-ccc" class="fs-28 text-right" />
					</view>
					<view class="cell flex-between-center mt-64">
						<view class="fs-28 lh-40rpx">联系电话</view>
						<input type="number" v-model="form.phone" placeholder="请输入手机号" placeholder-class="text--w111-ccc" class="fs-28 text-right" />
					</view>
					<!-- <view class="cell flex-between-center mt-64">
						<view class="fs-28 lh-40rpx">验证码</view>
						<view class="flex-y-center">
							<input type="number" v-model="form.captcha" placeholder="请输入验证码" placeholder-class="text--w111-ccc" class="fs-28 text-right w-300" />
							<button class="code-btn w-168 h-56 flex-center fs-24 ml-20"
								:disabled="disabled" @tap="code">{{ text }}</button>
						</view>
					</view> -->
					<view class="cell flex-between-center mt-64">
						<view class="fs-28 lh-40rpx">门店地址</view>
						<view class="acea-row row-between-wrapper">
							<view class="acea-row w-400 text-right row-right" @click="changeRegion">
								<text class="text--w111-ccc" v-if="!addressInfo.length">请选择门店地址</text>
								<view v-else>
									<text>{{addressText}}</text>
								</view>
							</view>
							<view class="location1 ml-12" @click="chooseLocation">
								<text class="iconfont icon-ic_location51 fontcolor mr-5"></text>定位
							</view>
						</view>
					</view>
					<view class="cell flex-between-center mt-64">
						<view class="fs-28 lh-40rpx">详细地址</view>
						<input type="text" v-model="form.detail" placeholder="请输入门店详细地址" placeholder-class="text--w111-ccc" class="fs-28 text-right" />
					</view>
					<view class="fs-28 lh-40rpx mt-64">请上传营业执照及相关资质证明图片</view>
					<view class="fs-24 lh-34rpx text--w111-ccc mt-12">(图片最多可上传8张，图片格式支持JPG、PNG、JPEG）</view>
					<view class="grid-column-4 grid-gap-24rpx mt-24">
						<view class="relative w-148 h-148" v-for="(item,index) in form.images" :key="index">
							<image :src="item" mode="aspectFill" class="w-148 h-148 rd-16rpx"></image>
							<view class="abs-rt w-32 h-32 del-pic flex-center" @click="DelPic(index)">
								<text class="iconfont icon-ic_close text--w111-fff fs-24"></text>
							</view>
						</view>
						<view class="h-148 flex-col flex-center upload bg--w111-f5f5f5 text--w111-999 rd-16rpx"
							@click='uploadpic' v-if="form.images.length < 8">
								<text class="iconfont icon-ic_camera fs-42"></text>
							<text class="fs-24 lh-34rpx pt-8">上传图片</text>
						</view>
					</view>
					<view class="flex-y-center mt-32">
						<text class="iconfont fs-30" :class="isSelect ? 'icon-a-ic_CompleteSelect' : 'icon-ic_unselect'" @tap="proviceSelect"></text>
						<text class="fs-24 text--w111-999 pl-12">已阅读并同意</text>
						<text class="font-red fs-24" @tap="getAgreement">《加盟门店入驻协议》</text>
					</view>
					<view class="w-full h-88 rd-44rpx flex-center text--w111-fff fs-28 mt-48" 
						:class="isSelectStar ? 'bg-red' : 'bg-disabled'" @tap="submitSupply">提交申请</view>
				</view>
			</view>
			<Verify @success="success" captchaType="clickWord" :imgSize="{ width: '330px', height: '155px' }"
				ref="verify"></Verify>
			<tui-modal :show="showModal" maskClosable custom @cancel="hideModal">
				<view class="tui-modal-custom" @touchmove.stop.prevent>
					<view class="fs-32 fw-500 lh-44rpx text-center">加盟门店入驻协议</view>
					<view class="fs-28 text--w111-666 lh-44rpx mt-24">
						<scroll-view scroll-y="true" style="max-height: 700rpx">
							<jyf-parser :html="storeAgreement" ref="article" :tag-style="tagStyle"></jyf-parser>
						</scroll-view>
					</view>
					<view class="w-full h-72 rd-36rpx flex-center bg-red fs-26 text--w111-fff mt-32" @tap="hideModal">知道了</view>
				</view>
			</tui-modal>
			<areaWindow ref="areaWindow" :display="display" :address="addressInfo" @submit="OnChangeAddress" @changeClose="changeClose"></areaWindow>
			<home :isHide="homeHide"></home>
		</view>
	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight;
	import {toLogin} from '@/libs/login.js';
	import {mapGetters} from "vuex";
	import { getGeocoder, getCityList, storeCreateApi, getCodeApi, registerVerify, storeApply, getUserAgreement } from "@/api/user.js";
	import colors from "@/mixins/color";
	import sendVerifyCode from "@/mixins/SendVerifyCode";
	import { HTTP_REQUEST_URL } from '@/config/app';
	import Verify from '../components/verify/verify.vue';
	import tuiModal from "@/components/tui-modal/index.vue";
	import parser from "@/components/jyf-parser/jyf-parser";
	import areaWindow from '@/components/areaWindow';
	import home from '@/components/home/index.vue';
	export default {
		data() {
			return {
				sysHeight:sysHeight,
				form:{
					system_name:'',
					name:'',
					phone:'',
					captcha:'',
					images:[],
					detail:''
				},
				canvasWidth: "",
				canvasHeight: "",
				canvasStatus: false,
				isSelect: false,
				keyCode:'',
				id:0,
				showModal: false,
				storeAgreement:'',
				tagStyle:{
					img: 'width:100%;display:block;',
				},
				display: false,
                homeHide: false,
				addressInfo: [],
				latitude: '',
				longitude: '',
				city_id:0
			}
		},
		components: {
			Verify,
			tuiModal,
			parser,
			areaWindow,
			home
		},
		mixins: [sendVerifyCode, colors],
		computed:{
			...mapGetters(['isLogin']),
			addressText() {
				return this.addressInfo.map(v => v.label).join('/');
			},
			isSelectStar(){
				if(this.form.system_name && this.form.name && this.form.phone && this.form.images.length && this.form.detail && this.addressInfo.length ) return true
			},
			headerBg(){
				return {
					backgroundImage: 'url('+ HTTP_REQUEST_URL + '/statics/images/store/apply_header.png'+')'
				}
			},
			mainHeight(){
				let {windowHeight } = uni.getSystemInfoSync();
				return windowHeight
			}
		},
		onLoad(options) {
			if( !this.isLogin){
				return toLogin();
			}
			this.id = options.id || 0;
			if(options.id){
				this.getInfo();
			}
		},
    onPageScroll() {
			this.homeHide = true;
		},
		methods: {
			changeRegion() {
				this.display = true;
			},
			// 关闭地址弹窗；
			changeClose: function() {
				this.display = false;
			},
			OnChangeAddress(address) {
				this.latitude = ''
				this.longitude = ''
				this.addressInfo = address;
			},
			// 获取选中位置
			chooseLocation: function() {
				let self = this;
				uni.chooseLocation({
					success: (res) => {
						let latitude, longitude;
						latitude = res.latitude.toString();
						longitude = res.longitude.toString();
						this.latitude = res.latitude
						this.longitude = res.longitude
						getGeocoder({
							lat: latitude,
							long: longitude
						}).then(res => {
							const data = res.data;
							getCityList(data.address_component.province + '/' + data.address_component.city + '/' + data.address_component.district + '/' + (!data
								.address_reference.town ? '' : data.address_reference.town.title)).then(res => {
								self.addressInfo = res.data;
								self.form.detail = data.formatted_addresses.recommend;
							}).catch(err => {
								self.$util.Tips({
									title: err
								});
							});
						})
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			/*** 删除图片* */
			DelPic: function(index) {
				let that = this, pic = this.form.images[index];
				that.form.images.splice(index, 1);
				that.$set(that.form, 'images', that.form.images);
			},
			/*** 上传文件 **/
			uploadpic: function() {
				let that = this;
				this.canvasStatus = true
				that.$util.uploadImageChange({count:8,url:'upload/image'}, function(res) {
					that.form.images.push(res.data.url);
					that.form.images = that.form.images.slice(0, 8);
				}, (res) => {
					this.canvasStatus = false
				}, (res) => {
					this.canvasWidth = res.w
					this.canvasHeight = res.h
				});
			},
			code(){
				if (!this.form.phone) return this.$util.Tips({
					title: '请填写手机号码'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.form.phone)) return this.$util.Tips({
					title: '请输入正确的手机号码'
				});
				this.$refs.verify.show()
			},
			success(data) {
				this.$refs.verify.hide()
				getCodeApi()
					.then(res => {
						this.keyCode = res.data.key;
						this.getCode(data);
					})
					.catch(res => {
						this.$util.Tips({
							title: res
						});
					});
			},
			async getCode(data){
				let that = this;
				if (!this.form.phone) return that.$util.Tips({
					title: '请填写手机号码'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.form.phone)) return this.$util.Tips({
					title: '请输入正确的手机号码'
				});
				await registerVerify({
						phone: that.form.phone,
						type: 'apply_store',
						key: that.keyCode,
						captchaType: 'clickWord',
						captchaVerification: data.captchaVerification
					})
					.then(res => {
						that.$util.Tips({
							title: res.msg
						});
						that.sendCode();
					})
					.catch(res => {
						that.$util.Tips({
							title: res
						});
					});
			},
			proviceSelect(){
				this.isSelect = !this.isSelect;
			},
			getInfo(){
				storeApply(this.id).then(res=>{
					let data = res.data;
					this.form.system_name = data.system_name;
					this.form.name = data.name;
					this.form.phone = data.phone;
					this.form.detail = data.detail;
					this.form.images = data.images;
					this.addressInfo = data.city_list;
					this.latitude = data.latitude;
					this.longitude = data.longitude;
					this.city_id = data.city_id;
				}).catch(err=>{
					return this.$util.Tips({
						title: err
					});
				})
			},
			submitSupply(){
				if(!this.isSelectStar) return this.$util.Tips({
					title: '请完整填写表单信息'
				});
				if(!this.isSelect) return this.$util.Tips({
					title: '请阅读并同意协议'
				});
				let regionArray = this.addressInfo;
				this.form.address = {
					province: regionArray[0].label,
					city: regionArray[1].label,
					district: regionArray[2].label,
					street: regionArray[3] ? regionArray[3].label : '',
					city_id: regionArray[regionArray.length - 1].id ? regionArray[regionArray.length - 1].id : this.city_id,
				};
				// 经度
				this.form.longitude = this.longitude;
				// 纬度
				this.form.latitude = this.latitude;
				storeCreateApi(this.id,this.form).then(res=>{
					uni.showToast({
						title:res.msg
					})
					uni.navigateTo({
						url: '/pages/users/franchisees/state?id='+ res.data.id
					})
				}).catch(err => {
					return this.$util.Tips({
						title: err
					});
				});
			},
			pageBack(){
				this.$util.backPage();
			},
			goRecord(){
				uni.navigateTo({
					url: '/pages/users/franchisees/record'
				})
			},
			getAgreement(){
				getUserAgreement('apply_store').then(res => {
					this.storeAgreement = res.data.content;
					this.showModal = true;
				}).catch(err => {
					that.$util.Tips({
						title: err.msg
					});
				})
			},
			hideModal(){
				this.showModal = false;
			},
			
		}
	}
</script>

<style>
	.header-top{
		width: 100%;
		height: 358rpx;
		background-size: cover;
	}
	.rule-btn{
		height: 48rpx;
		line-height: 48rpx;
		background: rgba(0,0,0,0.15);
		border-radius: 24rpx 0 0 24rpx;
		position: absolute;
		right: 0;
		bottom: 30rpx;
	}
	.bg-v-gradient{
		background: linear-gradient(180deg, #FE7015 0%, #EB3B26 100%);
	}
	.content-box{
		padding: 48rpx 32rpx 40rpx;
	}
	.code-btn{
		border: 1px solid #e93323;
		color: #e93323 !important;
		border-radius: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
	}
	.upload{
		border: 1rpx dashed #ccc;
	}
	.del-pic{
		background-color: #999;
		border-radius: 0 16rpx 0 16rpx;
	}
	.icon-a-ic_CompleteSelect, .font-red{
		color: #e93323;
	}
	.icon-ic_unselect{
		color: #ccc;
	}
	.bg-red{
		background-color: #e93323;
	}
	.bg-disabled{
		background-color: rgba(233, 51, 35, 0.5);
	}
	.modal-bottom{
		height: 136rpx;
		border-radius: 0 0 32rpx 32rpx;
		background-color: #fff;
	}
</style>